<template>
  <div class="news-info"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-backtop :visibility-height="100"></el-backtop>
    <el-row type="flex" class="row-title">
      <img src="@/assets/images/1.png" alt=""/>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="career-route">
        <el-breadcrumb-item class="career-title" :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }">校园新闻</el-breadcrumb-item>
        <el-breadcrumb-item>新闻详情</el-breadcrumb-item>
      </el-breadcrumb>
      <img src="@/assets/images/2.png" alt=""/>
    </el-row>
    <el-row type="flex" class="news-info-container">
      <el-col>
        <el-card class="news-info-card" shadow="hover">
          <div slot="header"><el-page-header @back="goBack" content="新闻详情"></el-page-header></div>
          <v-md-preview :text="article.content"></v-md-preview>
        </el-card>
      </el-col>
      <el-col>
        <el-card class="news-info-im" shadow="hover">
          <div slot="header">新闻信息</div>
          <el-row>标题:&nbsp;&nbsp; {{ article.title }}</el-row>
          <el-row style="margin-top: 10px">副标题:&nbsp;&nbsp; {{ article.sub_title }}</el-row>
          <el-row style="height: 21px;margin-top: 12px">
            <el-tooltip class="item" effect="dark" content="发布时间" placement="top">
              <i class="el-icon-date"></i>
            </el-tooltip>
            {{ msToDate(article.issue_time).withoutTime }}
          </el-row>
          <el-row style="height: 21px;margin-top: 12px">
            <el-tooltip class="item" effect="dark" content="阅读次数" placement="top">
              <i class="el-icon-mouse"></i>
            </el-tooltip>
            <count-to :start-val="0" :end-val="article.read_num" :duration="2600" class="card-panel-num" />
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import {msToDate} from "@/utils/format";

export default {
  name: "NewsInfo",
  components: {CountTo},
  data() {
    return {
      loading: false,
      articleId: "",
      article: {
        content: ""
      },
    }
  },
  computed: {

  },
  created() {
    this.articleId = this.$route.query.id
  },
  mounted() {
    this.getNewsInfo();
  },
  methods: {
    msToDate,
    getNewsInfo() {
      this.loading = true
      this.$store.dispatch("news/getNewsInfoByNewsId", this.articleId)
          .then((resp) => {
            this.article = resp.data.data
            setTimeout(() => {
              this.loading = false
            },1500)
          }).catch((error) => {
        console.log(error)
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  },
}
</script>

<style scoped lang="css">

.news-info {

}

.news-info-container {
  width: 1184px;
  min-width: 1184px;
  margin: 20px auto;
  min-height: 550px;
}

.row-title {
  height: 130px;
  background-color: #26b2b2;
  justify-content: space-evenly;
}

.career-route {
  line-height: 130px;
}

.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #fdfdfd !important;
}

::v-deep .el-breadcrumb__item {
  font-size: 20px;
}

.news-info-card {
  width: 884px;
  min-width: 884px;
  border-radius: 10px;
}

.news-info-im {
  width: 284px;
  min-width: 284px;
  margin-left: 16px;
  border-radius: 10px;
}

.news-info-im ::v-deep .el-card__header {
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
}
</style>
